// hook 组合式函数 钩子 => 将来想要用什么功能, 你只需要use一个函数就能完成对应的功能
import { ref, onMounted, onUnmounted } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import { useIntervalFn } from '@vueuse/core'

export function useLazyData(apiFn: () => void) {
  const target = ref(null)
  // 等组件进入可视区后, 才发请求
  // useIntersectionObserver 可以控制监控的元素进入可是去的面积/整体面积的比例  默认0.1
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        apiFn()
        stop()
      }
    },
    {
      threshold: 0, // 一旦监控元素进入可是区域一点点就可以是发送请求加载数据了 立即执行回调
    }
  )

  // 函数内的数据如果函数外部想用, 直接return出来 就可以直接使用了
  return target
}

// 我们自己封装的一个组合式函数, 用于获取滚动距离  一般都是use开头
export function useHmScrollY() {
  //--------------------------------------------------------------
  // window注册scroll事件(全局), 需要在组件卸载时 移除
  // create mounted => setup onMounted
  // ...
  const y = ref(0)
  const onScroll = () => {
    //   console.log('滚动了', document.documentElement.scrollTop)
    y.value = document.documentElement.scrollTop
  }
  onMounted(() => {
    window.addEventListener('scroll', onScroll)
  })
  // destroy => onUnmounted
  onUnmounted(() => {
    window.removeEventListener('scroll', onScroll)
  })
  //--------------------------------------------------------------
  return y
}

//封装一个倒计时的逻辑

export function useCountDown(count: number = 60) {
  // 准备一个时间数据, 初始值是0, 具体倒计时多久, 取决于你当下的业务
  const time = ref(0)
  // 测试
  // useIntervalFn()更容易将来封装抽离倒计时的业务 + 不用维护定时器id
  // resume 开启定时
  // pause 结束定时
  const { resume, pause } = useIntervalFn(
    () => {
      // console.log('hahhah ')
      time.value--
      if (time.value <= 0) {
        // 判断倒计时重点, 关闭定时器
        pause()
      }
    },
    1000,
    { immediate: false } // 不在立即出发
  )
  const start = () => {
    // 1. 需要根据业务初始化倒计时的秒数
    time.value = count
    // 2. 开启定时器,time--
    resume()
  }
  return {
    time,
    start,
  }
}
